{% extends 'layout/base.twig' %}
{% import 'macros/helpers.twig' as helpers %}

{% block title %}
- Url - {{ url }}
{% endblock %}

{% block content %}
<h1>Runs for {{ url }} (simplified)</h1>

<div class="row-fluid">
    <div id="time-line-graph" class="chart-container span6"></div>
    <div id="memory-line-graph" class="chart-container span6"></div>
</div>

<div class="searchbar clearfix">
    <a href="#" class="pull-right btn btn-small search-expand" title="Show search form">
        <i class="icon-search"></i> Search
    </a>

    <form action="{{ url('url.view') }}" method="get" class="row hide search-form form-inline">
        <input type="hidden" name="url" value="{{ search.url }}" />
        <a href="#" class="search-collapse close" title="Hide search form">&times;</a>
        <div class="control-group span4">
            <label class="control-label" for="start_date">Date range</label>
            <div class="controls">
                <input type="text" data-date-format="yyyy-mm-dd" id="date_start" name="date_start" class="datepicker span2" value="{{ search.date_start }}">
                <input type="text" id="date_end" data-date-format="yyyy-mm-dd" name="date_end" class="datepicker span2" value="{{ search.date_end }}">
            </div>
        </div>
        <div class="control-group span4">
            <label class="control-label" for="limit">Show Last:</label>
            <div class="controls">
                <select id="limit" name="limit">
                    <option value="-1"></option>
                    <option value="PT30M" {% if search.limit == "PT30M" %}selected="selected"{% endif %}>30 Minutes</option>
                    <option value="PT1H" {% if search.limit == "PT1H" %}selected="selected"{% endif %}>1 Hour</option>
                    <option value="PT2H" {% if search.limit == "PT2H" %}selected="selected"{% endif %}>2 Hours</option>
                    <option value="PT12H" {% if search.limit == "PT12H" %}selected="selected"{% endif %}>12 Hours</option>
                    <option value="P1D" {% if search.limit == "P1D" %}selected="selected"{% endif %}>24 Hours</option>
                    <option value="P1W" {% if search.limit == "P1W" %}selected="selected"{% endif %}>1 Week</option>
                    <option value="P2W" {% if search.limit == "P2W" %}selected="selected"{% endif %}>2 Weeks</option>
                    <option value="P30D" {% if search.limit == "P30D" %}selected="selected"{% endif %}>30 Days</option>
                </select>
                <br>
                <label class="control-label" for="limit_custom">or custom:</label> <small>(<a target="_blank" href="http://us3.php.net/manual/en/dateinterval.construct.php#refsect1-dateinterval.construct-parameters">more info</a>)</small>
                <br>
                <input type="text" id="limit_custom" name="limit_custom" value="{{ search.limit_custom }}">
            </div>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Search</button>
        </div>
    </form>
</div>

{% include 'runs/paginated-list.twig' %}

{{ helpers.pagination('url.view', paging, search) }}

{% endblock %}

{% block jsfoot %}
<script>
$(document).ready(function () {
    var limit = $('#limit'),
        limitCustom = $('#limit_custom'),
        dateInputs = $('#date_start, #date_end');

    limit.on('change', function() {
        limitCustom.val("");
        dateInputs.val('');
    });
    limitCustom.on('focus', function() {
        limit.val("");
        dateInputs.val('');
    });
    dateInputs.on('focus', function () {
        limit.val("");
        limitCustom.val("");
    });

    var graphData = {{ chart_data|json_encode|raw }};
    Xhgui.linegraph('#time-line-graph', graphData, {
        series: ['wt', 'cpu'],
        height: 300,
        xAxis: 'date',
        title: 'Time usage',
        legend: ['Wall time', 'CPU time'],
        postfix: ' \u00b5s'
    });
    Xhgui.linegraph('#memory-line-graph', graphData, {
        series: ['mu', 'pmu'],
        height: 300,
        xAxis: 'date',
        title: 'Memory usage',
        legend: ['Memory usage', 'Peak memory usage'],
        postfix: ' bytes'
    });
});
</script>
{% endblock %}
